<template>
<div class="bill">
  <div class="no-shipping-address">
    <div class="current-address">
      <img class="bg-border" src="@/assets/images/parcel/bg-border.png" alt="">
      <div class="address-info">
        <div class="content">
          <span>当您使用信用卡支付时，需要设置信用卡账单地址。</span>
          <Button @click="modal1 = true" class="btn" type="primary">添加账单地址</Button>
        </div>
      </div>
    </div>
  </div>
  <!--收货地址-->
  <div class="shipping-address">
    <div class="current-address">
      <img class="bg-border" src="@/assets/images/parcel/bg-border.png" alt="">
      <div class="address-info">
        <div class="left">
          <!--接收人-->
          <div class="receiver">
            <span class="name">Stephen Liu</span>
            <span class="contact">7786360908</span>
            <span class="contact">V5A 4N1</span>
          </div>
          <!--地址-->
          <div class="addr">
            <span>Canada British Columbia Burnaby </span>
            <span>7607 Arvin ct </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <Button>删除账单地址</Button>
    <Button class="btn" type="primary">修改账单地址</Button>
  </div>
  <Modal
      width="70%"
      class-name="vertical-center-modal"
      class="pop-address"
      v-model="modal1"
      title="信用卡账单地址"
  >
    <div class="pop-address-content">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="收件人" prop="name">
          <div class="flex-content">
            <Input v-model="formValidate.name" placeholder="名"></Input>
            <Input class="input" v-model="formValidate.mail" placeholder="姓"></Input>
          </div>
        </FormItem>
        <FormItem label="所在地址" prop="name">
          <div class="flex-content">
            <Select v-model="formValidate.city" placeholder="Select your city">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
            <Select class="input" v-model="formValidate.city" placeholder="Select your city">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
            <Input class="input" v-model="formValidate.mail" placeholder=""></Input>
          </div>
        </FormItem>
        <FormItem label="详细地址" prop="name">
          <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="邮编" prop="name">
          <Input v-model="formValidate.name" placeholder=""></Input>
        </FormItem>
        <FormItem label="手机号" prop="name">
          <Input v-model="formValidate.name" placeholder=""></Input>
        </FormItem>
      </Form>
    </div>
  </Modal>
</div>
</template>

<script>
export default {
  name: "user-bill",
  data() {
    return {
      modal1: false,
      formValidate: {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: ''
      },
      ruleValidate: {
        name: [
          {required: true, message: 'The name cannot be empty', trigger: 'blur'}
        ],
        mail: [
          {required: false, message: 'cannot be empty', trigger: 'change'},
        ]
      }
    }
  }
}
</script>

<style scoped lang="less">
.bill {
  .no-shipping-address {
    .current-address {
      position: relative;
      .bg-border {
        display: block;
        width: 100%;
      }
      .address-info {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        .content {

        }
        span {
          display: block;
          text-align: center;
          margin-bottom: 8px;
          color: @t-title-color;
          font-size: 14px;
        }
        .btn {
          display: block;
          margin: 0 auto;
        }
      }
    }
  }
  .shipping-address {
    margin-top: 40px;
    .shipping-title {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      .label {
        color: @t-title-color;
        font-size: 14px;
        font-weight: 500;
      }
      .icon {
        display: block;
        width: 16px;
        height: 16px;
        margin-left: 4px;
        margin-right: 8px;
        cursor: pointer;
      }
      .tag {
        padding: 2px 10px;
        background: #E8FFF3;
        border-radius: 90px;
        font-size: 12px;
        color: #51B481;
        .iconfont {
          font-size: 14px;
          color: #51B481;
          margin-right: 3px;
        }
      }

    }
    .current-address {
      position: relative;
      margin-top: 16px;
      .bg-border {
        display: block;
        width: 100%;
      }
      .address-info {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 40px;
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          height: 100%;
          .receiver {
            color: @t-title-color;
            .name {
              font-size: 24px;
              font-weight: 700;
            }
            .contact {
              margin-left: 24px;
              font-size: 14px;
              font-weight: 500;
            }
          }
          .addr {
            color: @t-text-color;
            span {
              display: block;
              margin-top: 6px;
            }
          }
        }
        .right {
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          height: 100%;
          .select-addr {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
            .default-addr {
              padding: 2px 12px;
              color: @primary-color;
              background: #f0f9ff;
              border-radius: 2px;
            }
            .addr-value {
              padding: 2px 12px;
              margin-left: 8px;
              color: @success-color;
              background: #E6F3EC;
              border-radius: 2px;
            }
          }
          .edit-wrap {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .edit {
              display: flex;
              align-items: center;
              cursor: pointer;
              img {
                display: block;
                width: 16px;
                flex: 0 0 16px;
                height: 16px;
              }
              span {
                margin-left: 4px;
                color: @primary-color;
                font-size: 14px;
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }
  .footer {
    margin-top: 16px;
    .btn {
      margin-left: 16px;
    }
  }
}
.pop-address {
  .pop-address-content {
    .flex-content {
      display: flex;
      align-items: center;
      .input {
        margin-left: 16px;
      }
    }
  }
}
</style>